<template>
<div class="content">
	<!-- 条件筛选 -->
	<div class="filter">
		<div class="half" @click="toggleFilter(1)">{{timeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!dateChoose,'icon-ssj':dateChoose}"></i></div>
		<div class="half" @click="toggleFilter(2)">{{typeTitle}}&nbsp;&nbsp;<i class="iconfont" :class="{'icon-xsj':!typeChoose,'icon-ssj':typeChoose}"></i></div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="dateChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">付款时间</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':timeType == 0 && !defineTime}" @click.stop.prevent="changeTime(0,'当天')">当天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 6 && !defineTime}" @click.stop.prevent="changeTime(6,'7天')">7天</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 29 && !defineTime}" @click.stop.prevent="changeTime(29,'1个月')">1个月</div>
				<div class="time-cell mr" :class="{'cell-selected':timeType == 89 && !defineTime}" @click.stop.prevent="changeTime(89,'3个月')">3个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 179 && !defineTime}" @click.stop.prevent="changeTime(179,'6个月')">6个月</div>
				<div class="time-cell" :class="{'cell-selected':timeType == 364 && !defineTime}" @click.stop.prevent="changeTime(364,'1年')">1年</div>
				<div class="time-cell custome-cell" :class="{'cell-selected':defineTime}" @click.stop.prevent="changeTime(666,'自定义时间')">自定义时间</div>
			</div>
			<div v-if="defineTime">
				<div class="half-title" style="padding-left:.4rem;">开始时间</div>
				<div class="half-title" style="padding-left:.21rem;">结束时间</div>
				<div class="time-grid">
					<div class="time-cell custome-cell">
						<datetime v-model="start_date"></datetime>
					</div>
					<div class="time-cell custome-cell">
						<datetime v-model="end_date"></datetime>
					</div>
				</div>
				<div class="certain" @click.stop.prevent="makeSureTime()">确&nbsp;定</div>
			</div>
		</div>
	</div>
	<div class="choose" @click="hideFilter()" v-if="typeChoose">
		<div class="item" @click.stop.prevent="function(){}">
			<div class="title">医种类型</div>
			<div class="time-grid">
				<div class="time-cell" :class="{'cell-selected':drug.id == drugId,'pd-both':drug.name.length>5}" v-for="drug in drug_type" @click="choosePay(drug.id,drug.name)">{{drug.name}}</div>
			</div>
		</div>
	</div>
	<!-- 条件筛选END -->
	<!-- 财务概览 -->
	<div class="financial-overview">
		<div class="common-title">概况<span class="unit">（元）</span></div>
		<div class="collection" style="justify-content: flex-start;">
			<div class="cell purple">
				<div class="num">
					<countup :start-val="0" :end-val="gross_impression" :duration="2"></countup>
				</div>
				<div class="desc">总人次</div>
			</div>
			<div class="cell green" style="margin-left:.4rem;">
				<div class="num">
					<countup :start-val="0" :end-val="total_receivable_amt" :decimals="2" :duration="2"></countup>
				</div>
				<div class="desc">营收金额合计</div>
			</div>
		</div>
	</div>
	<!-- 财务概览END -->
	<!-- 收费记录 -->
	<div class="charge-record">
		<div class="common-title">销售详情</div>
		<div class="table" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
			<div class="cell" v-for="item in list" v-if="drug_type.length > 0">
				<div class="detail">
					<div class="item">{{item.item_name}}&nbsp;x{{item.count}}&nbsp;&nbsp;<span class="desc">{{item.doctor_name}}</span></div>
				</div>
				<div class="sum" :class="{'earn':item.receivable_amt >= 0,'pay':item.receivable_amt < 0}">
					<span v-if="item.receivable_amt >= 0">+</span>
					<span v-if="item.receivable_amt < 0">-</span>
					{{item.receivable_amt}}
				</div>
			</div>
		</div>
	</div>
	<!-- 收费记录END -->
</div>
</template>

<script>
import { Datetime,Countup } from 'vux'
import APIURL from '@/apiurl'
import Vue from 'vue'

export default {
	components:{
		Datetime,Countup
	},
	data() {
		return {
			timeTitle:"当天",
			timeType:0,
			typeTitle:"医种类型",
			defineTime:false,// 选择自定义时间
			sureDefine:false,// 确定自定义时间
			dateChoose:false,
			typeChoose:false,
			start_date: new Date().Format("yyyy-MM-dd"),
			//start_date: "2017-08-17",
			end_date: new Date().Format("yyyy-MM-dd"),
			total_receivable_amt:0,
			gross_impression:0,
			drug_type:[],
			drugId:0,
			busy:false,
			page:0,// 页码
			entry_count:10,// 每页条目数
			doctor_name:'',// 医生名称
			list:[],
			intervalId:""
		}
	},
	methods: {
		makeSureTime() {
			this.toggleFilter(1);
			this.sureDefine = true;
			this.timeTitle = "自定义时间";
			this.resetPage();
		},
		changeTime(timeType,timeTitle) {
			if (timeType != 666) {
				var nowDate = new Date();
				this.start_date = new Date(nowDate - timeType * 24*3600*1000).Format("yyyy-MM-dd");
				this.timeType = timeType;
				this.timeTitle = timeTitle;
				this.toggleFilter(1);
				this.defineTime = false;
				this.sureDefine = false;
				this.resetPage();
			} else {
				this.defineTime = true;
			}
		},
		choosePay(payId,payName) {
			this.drugId = payId;
			if ( payId == 0 ) {
				this.typeTitle = "医种类型"
			} else {
				this.typeTitle = payName;
			}
			this.drugId = payId;
			this.toggleFilter(2);
			this.resetPage();
		},
		toggleFilter(type) {
			switch(type) {
				case 1:
					this.typeChoose = false;
					this.dateChoose = !this.dateChoose;
					if (this.dateChoose) {
						if (!this.sureDefine) {
							this.defineTime = false;
						}
					}
					break;
				case 2:
					this.dateChoose = false;
					this.typeChoose = !this.typeChoose;
					break;
			}
		},
		hideFilter() {
			this.dateChoose = false;
			this.typeChoose = false;
		},
		resetPage() {
			this.page = 0;
			this.list = [];
			this.busy = false;
			this.queryStatistics();
		},
		loadMore() {
			if (this.busy) {
				return;
			}
			this.queryStatistics();
		},
		setDrName(doctorName) {
			this.doctor_name = doctorName;
			this.resetPage();
		},
		queryStatistics() {
			var self = this;
			var requestBody = {
				token : userToken,
				hospital_id: hospital_id,
				start_date:self.start_date,
				end_date:self.end_date,
				page:self.page,
				entry_count:self.entry_count
			};
			if (self.drugId != 0) {
				requestBody.drug_type = self.drugId;
			}
			if (self.doctor_name != "") {
				requestBody.doctor_name = self.doctor_name;
			}
			this.busy = true;
			self.post(APIURL.DOCTOR_STATISTICS, requestBody, function(data){
				self.total_receivable_amt = data.total_receivable_amt;
				self.gross_impression = data.gross_impression;
				if (self.page == 0) {
					self.list = data.list;
				} else {
					self.list = self.list.concat(data.list);
				}
				if (data.list.length == self.entry_count) {
					// 判断是否需要继续加载
					self.page += 1;
					self.busy = false;
				} else {
					self.busy = true;
				}
			});
		},
		query() {
			var self = this;
			var requestBody = {
				token : userToken,
			}
			self.post(APIURL.CATEGORY, requestBody, function(data){
				self.drug_type = data.statistics.work.drug_type;
				Vue.filter('drugDic',function(id){
					for (var i=0;i<self.drug_type.length;i++) {
						var drugType = self.drug_type[i];
						if (id == drugType.id ) {
							return drugType.name;
						}
					}
					return "";
				});
				self.queryStatistics();
			})
		}
	},
	mounted() {
		initTokenNative();
		// 暴露 设置医生姓名 给window 让原生调用
		window.setDrName = this.setDrName;
		setTitleNative("工作统计");
		showSearchBtnNative();
		var self = this;
		// 定时器判断原生有无赋值诊所信息给H5
		this.intervalId = window.setInterval(function(){
			if (userToken != undefined && hospital_id != undefined) {
				self.query();
				if (self.intervalId != "") {
					window.clearInterval(self.intervalId);
				}
			}
		},100);
		
	}
}
</script>

<style scoped>
.pd-both {
	padding: 0 0.27rem;
}
.charge-record .table .cell {
	height:1.79rem;
}
.charge-record .table .cell .detail .item {
	line-height:.79rem;
}
.charge-record .table .cell .sum {
	height:.79rem;line-height:.79rem;
}
</style>